<template>
    <div id="recommend">
        <div id="title">{{title}}</div>
        <div id="content">
            <div id="cont" v-for="item in Info" :key="item.id">
                <div id="cont-1">
                    <img :src="item.imgurl" :width="studentWidth" :height="studentHeight">
                    <div id="cont-1-span">
                        <span>{{name}}</span>
                        <span>{{grade}}  {{age}}</span>
                        <span>{{major}}</span>
                        <span>{{school}}</span>
                    </div>
                </div>
                <div id="cont-2">
                    <span id="cont-2-1">个人简介：</span>
                    <span id="cont-2-2">爱好：{{interest}}</span>
                    <span id="cont-2-3">特长：{{strength}}</span>
                    <span id="cont-2-3">荣誉：{{honour}}</span>
                </div>
                <div id="cont-3">
                    <button>发起邀请</button>
                    <button>查看简历</button>
                </div>
            </div>
        </div>
        <div id="pagination">
            <el-pagination
                background
                :pager-count="5"
                layout="prev, pager, next"
                :total="90">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    props:{
        title: String,
        name: String,
        grade: String,
        age: String,
        major: String,
        school: String,
        interest: String,
        strength: String,
        honour: String,
        studentWidth: String,
        studentHeight: String,
        Info:Array,
    }
}
</script>

<style scoped>
    #title{
        width:120px;
        height:32px;
        font-size:110%;
        color:white;
        text-align:center;
        line-height:32px;
        margin-top:40px;
        margin-left:125px;
        background-color:rgb(0,160,234);
    }
    #content{
        margin-left:75px;
        display:flex;
        flex-wrap:wrap;
    }
    span{
        display:block;
    }
    img{
        border-radius: 50% 50% 50% 50%;
        margin-top:32px;
        margin-left:32px;
    }
    #cont{
        margin-left: 50px;
        margin-top:40px;
        width:342px;
        height:408px;
        background-color:rgb(250,250,250);
        box-shadow: 0px 0px 25px 10px rgb(245,245,245);
    }
    #cont-1{
        display:flex;
        text-align:center;
    }
    #cont-1 span{
        font-size:22px;
        font-weight:500;
        margin-top:10px;
    }
    #cont-1-span{
        margin-top:15px;
    }
    #cont-2{
        margin-top:15px;
        margin-left:20px;
    }
    #cont-2-1{
        font-size:18px;
    }
    #cont-2-2{
        color:rgb(190,190,190);
        margin-top:15px;
        font-size:16px;
    }
    #cont-2-3{
        color:rgb(190,190,190);
        font-size:16px;
    }
    #cont-3{
        margin-left:127px;
    }
    button{
        width:80px;
        height:20px;
        line-height:20px;
        font-size: 12px;
        border-radius: 1px;
        background-color:rgb(0,164,236);
        border:none;
        color:white;
        margin-top:30px;
        margin-left:15px;
    }
    #pagination{
        margin-left:502px;
        margin-top:60px;
    }
</style>
